<!--
 * @Description:我的考试 
 * @Author: 晋龍
 * @Date: 2023-02-12 13:43:17
 * @LastEditors: 晋龍
 * @LastEditTime: 2023-02-21 13:10:41
-->
<template>
    <div class="main">
        <!-- AppBar导航栏 -->
        <var-app-bar title="我的考试" title-position="center" color="rgb(244,245,249)" text-color="rgb(102,106,119)"
            class="myPublishQuertion">
            <template #left>
                <var-button color="transparent" text-color="rgb(102,106,119)" round text @click="onBack">
                    <var-icon name="chevron-left" :size="30" class="myPublishQuertion" />
                </var-button>
            </template>
        </var-app-bar>

        <!-- Tabs选项卡 -->
        <var-tabs elevation color="rgb(244, 245, 249)" active-color="rgb(38, 89, 247)" inactive-color="rgb(38, 89, 247)"
            v-model:active="active">
            <var-tab>未完成</var-tab>
            <var-tab>已完成</var-tab>
        </var-tabs>

        <var-tabs-items v-model:active="active">
            <!-- 未完成 -->
            <var-tab-item>
                <!-- 搜索框 -->
                <input type="text" class="searchInput" placeholder="搜索" />
                <!-- 块级卡片 -->
                <div class="card" v-for="(item,index) in examLists" :id="item.id">
                    <!-- 标题 -->
                    <div class="header" v-if="item.status < 3">
                        <span class="hLeft">{{ item.name }}</span>
                        <span class="iconRight">
                            <var-icon name="chevron-right" color="rgb(38,89,247)" size="25px" />
                        </span>
                    </div>
                    <div class="content" v-if="item.status < 3">
                        <span class="mLeft">{{item.startTime}}</span>
                        <!-- <div class="mLeft" v-else>
                            <span class="mLeft-start">距离考试开始还有:</span>
                            <span class="mLeft-end">01:22:34</span>
                        </div> -->
                        <var-button type="primary" size="small" class="mRight-start" v-if="item.status===2" @click="start(item.id)">开始考试</var-button>
                        <span class="mRight" v-else-if="item.status===1">未开始</span>
                    </div>
                </div>
            </var-tab-item>
            <!-- 已完成 -->
            <var-tab-item>
                <!-- 搜索框 -->
                <input type="text" class="searchInput" placeholder="搜索" />
                <!-- 块级卡片 -->
                <div class="card" v-for="(item,index) in examLists" >
                    <!-- 标题 -->
                    <div class="header" v-if="item.status === 3">
                        <span class="hLeft">{{ item.name }}</span>
                        <span class="iconRight">
                            <var-icon name="chevron-right" color="rgb(38,89,247)" size="25px" />
                        </span>
                    </div>
                    <div class="content" v-if="item.status === 3">
                        <span class="mLeft">成绩:</span>
                        <span class="mNum" v-if="item.score === -1">0 分</span>
                        <span class="mNum" v-else>{{ item.score }} 分</span>

                        <!-- <span class="" v-if="item.status === 3"></span> -->
                        <span class="mRight" v-if="item.status === 3">{{item.startTime}}</span>
                    </div>
                </div>
            </var-tab-item>
        </var-tabs-items>
        <!-- 考试弹窗 -->
        <var-popup v-model:show="center">
            <div class="popup-example-block">
                <div class="blue">
                    <div class="p1">考试须知</div>
                    <div class="p2">请认真阅读以下内容</div>
                </div>
                <div class="popup-content">
                    <p><b>(一)诚信考试。</b>同学们要端正学习态度，诚信应考，营造良好的线上考核氛围，杜绝违纪舞弊行为发生。线上考核将在阅卷环节加强雷同试卷的检查，如在课程考核或约考过程中发现学生违纪，依照《山西农业大学学生考试违规处理办法（试行）》严肃处理。</p>
                    <p><b>(二)考前模拟。</b>学院会提前了解学生的网络状况、在线设备使用情况。任课教师在正式考试实施前，会提前对考试平台进行模拟测试，所有学生都要参加对应的课程考前模拟，测试中出现的问题要及时的反馈给任课教师。通过考前模拟任课教师要针对可能出现的问题做好预案，以保证考试的顺利进行。</p>
                </div>
                <div class="readed">
                    <var-button type="primary" size="large" color="rgb(102,106,119)" text-color="#fff" @click="center = false">我已阅读完毕</var-button>
                </div>
                <div class="startExam">
                    <var-button type="primary" size="large" color="rgb(38, 89, 247)" text-color="#fff" @click="onExam(id)">开始考试</var-button></div>
            </div>
          </var-popup>
    </div>
</template>

<script setup>
import { reactive, ref, toRef } from "vue";
import router from "@/router";
import { storeToRefs } from 'pinia';
import { useExamStore } from '@/stores/exam'
const examStore = useExamStore()
const { list,examLists,questionList } = storeToRefs(examStore)
const { getExamLists,ExamList,getTheQuestionList } = examStore
getExamLists()
ExamList()
getTheQuestionList()

const active = ref(0)
// 返回上一页
const onBack = () => router.push("/home");
// 确认考试弹出框
const center = ref(false)
const Id = ref()
// 跳转考试
const onExam = () =>{
    console.log(Id);
    router.push({
        path:'/examListByUser',
        query:{Id:Id.value}
  })
}
const start = (id) =>{
    Id.value = id
    center.value = true
}
</script>

<style lang="less" scoped>
.main {
    .myPublishQuertion {
        font-weight: bolder;
        font-size: larger;
    }

    .searchInput {
        margin-top: 15px;
        margin-left: 10px;
        width: 330px;
        height: 35px;
        background-color: rgb(255, 255, 255);
        border: none;
        border-radius: 20px;
        padding-left: 40px;
        background-image: url('./image/searchIcon.png');
        background-size: 20px 20px;
        background-position: 15px 8px;
        background-repeat: no-repeat;
        font-size: 16px;
        outline: none;
    }

    .searchInput:hover {
        background-color: rgb(224, 229, 248);
        border: none;
    }

    .searchInput::placeholder {
        color: #B2B5DC;

    }

    .searchInput:focus {
        outline: none;
    }

    .card {
        padding: 0px 0px;
        margin: 10px 12px;
        border-radius: 10px;
        background-color: rgb(255, 255, 255);
        overflow: auto;
        position: relative;

        .header {
            padding: 5px 10px;
            margin-bottom: 5px;
            overflow: auto;
            position: relative;

            .hLeft {
                margin-top: 15px;
                margin-left: 10px;
                float: left;
            }

            .iconRight {
                margin-top: 15px;
                margin-right: 10px;
                float: right;
            }
        }

        .content {
            width: 100%;
            overflow: auto;
            position: relative;
            padding-bottom: 10px;

            .mLeft {
                float: left;
                margin: 5px 0 5px 20px;
                font-size: 15px;
            }
            .mNum{
                font-size: 20px;
                font-weight: bold;
                float: left;
                color: rgb(38, 89, 247);
                margin: 0px 0px 0px 10px;

            }

            .mRight-start {
                padding: 0px 15px;
                margin: 5px 20px 0px 0px;
                float: right;
                background-color: rgb(38, 89, 247);
                font-size: 14px;
                color: azure;
                border-radius: 20px;

            }

            .mRight {
                float: right;
                padding: 5px 10px;
                margin: 5px 15px 0px 0px;
                float: right;
                font-size: 15px;
            }
        }
    }
    .popup-example-block {
        
        width:350px;
        .blue{
            background: linear-gradient(45deg,rgb(42, 91, 246),rgb(71, 107, 243),rgb(164, 171, 221));
            padding: 5px 0px;
            .p1{
                font-size: 30px;
                font-weight: bolder;
                color:rgb(247, 247, 253);
                text-align: center;
                padding: 40px 0 10px 0;
            }
            .p2{
                font-size: 24px;
                font-weight: bold;
                text-align: center;
                color: rgb(184, 199, 250);
                padding: 10px 0 20px 0;
            }
        }
        .popup-content{
            font-size: 20px;
            padding: 0 6px;
        }
        .readed{
            padding: 3px 0 10px 0;
            text-align: center;
        }
        .startExam{
            padding: 3px 0 20px 0;
            text-align: center;
            
        }
      }

}
</style>